// style.scss
// a SASS stylesheet
//
// Import
// --------------------------------------------------
//
@import "goodies";
@import "app";
@import "social_foundicons.scss";
@import "social_foundicons_ie7.scss";
@import "base";
//
//
// Table of Contents
// --------------------------------------------------
//
// - :1 HTML tags
// - :2 Typography
// - :3 Helper classes
// - :4 ID tags
//   - :4.01 MainNav
//   - :4.02 Footer Navigation
//   - :4.03 News
//   - :4.04 Homepage
//   - :4.05 Ministries and I'm New page
//   - :4.06 Vision Statement
//   - :4.07 Who is Jesus
//   - :4.08 Media
//   - :4.09 Giving
//   - :4.09 Giving
//   - :4.10 Staff Page
// - :5 Class tags
// - :6 Overrides
// - :7 Search
//   - :7.1 Search Form
//   - :7.2 Search Results
// - :8 Debugging
//
//
// :1 HTML tags
// --------------------------------------------------
// Nothing but the HTML tags, leave classes and IDs to
// further sections. And keep nested tags to a minimum
//
body {
  background: $white;
  position: relative;
}

hr {
  margin: $unit 0 $unit - 1;

  &.thin { border-width: 1px; }
  &.medium { border-width: 3px; }
  &.thick { border-width: 5px; }
  &.green {
    border-color: $green;
  }
}
aside {
  float: right;
  margin: 0 0 $unit $unit;
  &.left {
    float: left;
    margin: 0 $unit $unit 0;
  }
  &.right {
    border-left: 2px solid $green;
    padding: ms(0) ms(0) ms(1) ms(2);
  }
  p {
    font-style: normal;
  }
}
figure {
  margin: ms(0);
  &.left {
    float: left;
    margin: 0 ms(0) ms(0) 0;
  }
  &.right {
    float: right;
    margin: 0 0 ms(0) ms(0);
  }
  &.full {
    margin: 0 0 ms(0) 0;
  }
}
ul > li,
ol > li {
  margin-bottom: ms(1);
}
section {
  &.padded {
    padding-top: ms(5);
    padding-bottom: ms(3);
  }
}
p em {
  font-family: $otherfamily;
  font-style: italic;
  font-weight: normal;
  font-size: ms(0);
  color: $black;
}
//
// :2 Typography
// --------------------------------------------------
// Simple typography styles, leave specific styles
// to classes and IDs.
//
body {
  font-family: $family;
}
h1 { font-size: ms(4); }
h1.page-title {
  text-transform: uppercase;
  color: $green;
}
h2 { font-size: ms(3); }
h3 { font-size: ms(2); }
h4 { font-size: ms(1); }
h5 { font-size: ms(0); }
h6 { font-size: ms(0); font-style: italic; }
div>h1:first-child,
div>h2:first-child,
div>h3:first-child,
div>h4:first-child,
div>h5:first-child,
div>h6:first-child {
  // remove the margin (included in border-box) from the 1st of each
  margin-top: 0;
}

figcaption {
  font-size: ms(0);
  line-height: 1.68;
  margin-bottom: ms(1);
}
p {
  &.two-columns { @include text-columns(2); }
  &.three-columns { @include text-columns(3); }
  &.four-columns { @include text-columns(4); }
}
.size5 { font-size: ms(4); }
.size4 { font-size: ms(3); }
.size3 { font-size: ms(2); }
.size2 { font-size: ms(1); }
.size1 { font-size: ms(0); }
.alternate { font-family: $otherfamily; }
.footnote {
  color: lighten( $black, 25 );
  font-size: 12px;
}
.declare {
  font-size: ms(3);
}
.center {
  // center the text
  text-align: center;
}
.full-justify {
  text-align: justify;
  &:after {
    content: ' ';
    width: 100%;
    display: inline-block;
    height: 1px;
  }
}

hgroup {
  margin: ms(0) 0;

  & > * {
    margin: 0;
  }

  h1 + .drophead {
    font-size: ms(2);
  }
}

//
// :3 Helper classes
// --------------------------------------------------
// Use these to modifiy content. Keep them very simple
// and use them by stacking.
.greedy {
  // Use this to make elements take their whole row
  width: 100%;
  margin-bottom: ms(0);
}
.inline-block { display: inline-block; }
//
// .readmore
// This element has some inconsistency, sometimes being a wrapper
// and sometimes being an anchor tag class.
// Anchor tag is preferable
.readmore {
  height: 48px;
  line-height: 48px*$ratio;
  padding: $unit*16/16 $unit*32/16;
  text-align: center;
  width: auto;
  font-size: $unit*14/16;
  font-weight: bold;
  color: $white;
  @include box-shadow( 0px, 1px, 0px, white, 0.50, inset );
  @include gradientY( $green, darken( $green, 10% ), $green );
  border: 1px solid darken( $green, 20% );
  
  &:after {
    content: '\00bb';
    padding-left: $unit*.5;
  }
}
.whisper {
  color: lighten( $black, 30%);
}

// Order and Unordered list helpers
ol.bigBullets,
ul.bigBullets {
  li {
    font-size: ms(2);
    font-weight: 900;
  }
}

//
// :4 ID tags
// --------------------------------------------------
// These are specific to ID tagged items such as layout
// and structure items as well as non-repeating elements.
//
.site-header {
  margin-bottom: $unit*3;
  @include outerRow();

  .site-logo {
    @include column(8);
    margin: $unit 0;

    a {
      display: block;
      background: url($templateImages + '/nrhc-logo.gif') no-repeat;
      width: 329px;
      height: 64px;

      span {
        display: none;
      }
    }
  }

  .header-search {
    @include column(4);
  }
}
// SVG alternate for logo. The .svg class is on the HTML tag so it needs to not be nested.
.svg .site-header .site-logo a {
  background: url($templateImages + '/nrhc-logo.svg') no-repeat;
  display: block;
  overflow: hidden;
}

.site-content {
  @include outerRow();
  margin: $unit*2 auto 0;

}

.site-footer {
  border-top: 1px solid $black;
  margin-top: $unit*2;
  padding-top: $unit;

  nav {
    @include column(9);

    span.flyout-toggle { display: none; }
  }
  div.social    {
    @include column(3);
    font-size: ms(2);
    text-align: right;
    a i {
      color: $black;
      @include my-text-shadow( 0px, 3px, 2px, $white, 0 );
      &:hover { color: $green; }
    }
  }
  div.legal     { @include column(6); }
  div.copyright { @include column(6); text-align: right; }
}

.homepage-slider {
  // add a loading spinner to the Orbit slider
  background: url($templateImages + '/spinner.gif') no-repeat center center;

  // force images to be hidden until Orbit loads
  img { display: none; }

  &.orbit {
    background: none;

    img { display: block; }
  }
}

ul.orbit-bullets {
  // Orbit overried of global ul margin
  margin-bottom: 0;
}

.media-section {
  div h1:first-child {
    font-size: ms(1);
    color: $green;
  }
}

#twitter-feed {
  div.twtr-hd {
    float: left;
  }
  div.twtr-timeline {
    height: auto !important;
  }
  div.twtr-ft {
    display: none;
  }
}

#toolbox {
  color: $white;
  text-align: right;
  margin-bottom: $unit;

  .toolbox, ul {
    padding-left: 10%;
    padding-right: 10%;
  }

  .toolbox, ul li a {
    background-color: $black;
  }

  .toolbox {
    display: none;
    padding: $unit;
  }

  ul#toolboxList {
    list-style: inside none;

    li {
      display: inline;

      a {
        padding: $unit $unit*1.5 $unit $unit;
        @include rounded(0,0,7px,7px);

        &::after {
          position: relative;
          top: 10px;
          left: 8px;
          @include cssTriangle(4px,#fff,'top');
          display: inline;
        }

        &.open::after {
          position: relative;
          top: -10px;
          left: 8px;
          @include cssTriangle(4px,#fff,'bottom');
          display: inline;
        }
      }
    }
  }
}

// Tweets is the ID on the homepage that shows NRHC's latest tweet
#tweets {
  // hide to start, then when the "loaded" class is added, style it
  display: none;

  &::before {
    font-family: "SocialFoundicons";
    content: "\f004";
    float: left;
    font-size: $unit*1.5;
    margin-right: $unit;
    color: $green;
  }

  &.loaded {
    display: block;
    padding: $unit $unit*2;
    background-color: $black;
    color: $white;
    @include rounded(3px,3px,3px,3px);

    p {
      // override the bottom margin from the default
      margin-bottom: 0;
    }
  }
}

//
// - :4.1 MainNav
//   --------------------------------------------------
//   These styles are specific to the main navigation
//   menu in the header of each page.
//
.header-navigation {
  $menuitems : 5;
  $menumargin: 2;

  text-align: center;
  text-transform: uppercase;

  ul.nav-bar {
    background-color: transparent;
    width: 100%;
    height: auto;
    margin-top: 0;
    float: right;

    & > li {
      float: none;
      display: inline-block;
      vertical-align: bottom;
      border: 0 none;
      border-bottom: $unit/8 solid $green;
      margin: 0 1%;
      width: percentage((floor(100/$menuitems)-($menumargin*2))/100);

      &:hover {
        background-color: transparent;
      }
      &:active {
        border-bottom-color: $black;
      }

      &.active {
        background-color: transparent;
        color: $black;
        border-bottom-color: $black;

        &::after {
          @include cssTriangle(7px,$black,top);
          position: absolute;
          bottom: $unit * -1;
          left: 50%;
        }
      }
    }
    & > li.has-flyout > a:first-child::after {
      display: none;

      .flyout-toggle { display: none; }
    }
    & > li > a:first-child {
      font-size: ms(1);
      color: $black;
      font-weight: normal;
      text-align: center;
      @include text-shadow( 0, -1px, 3px, $white );
      min-height: $unit*3;
      width: 100%;
      margin: 0;
      padding: $unit*14/16 0 0;
      line-height: $ratio;

      &:hover {
        color: $green;
      }
      &:active {
        color: $black;
      }
    }
    ul.flyout {
      transition-property: display;
      transition-duration: 0.5s;
      transition-delay: 1s;
      width: 100%;
      left: 0;
      top: $unit*3;
      background-color: $black;
      border: 0 none;

      li {
        border: 0 none;

        a {
          background-color: transparent;
          font-size: $unit*12/16;
          font-weight: normal;
          color: $white;
          border: 0 none;
          height: auto;
          line-height: $ratio;
          padding: $unit $unit/4;
          text-transform: none;
          @include text-shadow( 0, 1px, 3px, $black, 0.7 );
          @include box-shadow( 0, 1px, 0, white, 0.5 );
        }
      }

      li.active {
        a {
          color: $green;
          // TODO: figure out precedence. If I use the @include here, it is ignored or preceeded by a previous rule
          -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
          -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
          box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
        }
      }
    }
    .flyout-toggle {
      display: none;
    }
  }
}

//
// :4.2 Footer Navigation
// --------------------------------------------------
// These styles are specific to the footer navigation
// menu in the footer of each page.
//
.site-footer nav {
  ul li {
    display: inline;

    a {
      color: $black;
      font-size: $unit*14/16;
      font-weight: bold;
      text-decoration: none;
      padding: 0 $unit*14/16;
      border-right: 1px solid $black;
    }
    a:hover {
      text-decoration: underline;
      color: lighten( $black, 40% );
    }
    a:active {
      text-decoration: underline;
      color: $green;
    }
  }
  ul li:first-child a { padding-left: 0; }
  ul li:last-child a { border-right: none; }
  ul.flyout { display: none; }
}
//
// :4.3 News
// --------------------------------------------------
// These styles are for the blog list
//
.news-blog {
  .entry{
    background: $white;
    border: 1px solid lighten( $black, 70%);
    padding: ms(0) ms(-2);
    position: relative;
    height: 360px;
    overflow: hidden;

    h1 {
      font-size: ms(1);
      margin: 0 ms(1) ms(-1);
    }
    p {
      margin: 0 ms(1) ms(-1);
    }
    footer time {
      position: absolute;
      color: lighten($black, 50%);
      bottom: ms(-1);
      right: ms(-1);
      font-size: ms(-1);
    }
  }
}

section#blog {
  article.featuerd {
  }
  article.entry {
    padding: $unit/2;

    figure {
      float: left;
      width: 25%;
      margin: 0;
    }

    &.with-thumb > div {
      margin-left: 25%;
      padding-left: $unit;
    }

    h1 {
      font-size: ms(2);
    }
  }
}
article#blog-post {
  footer {
    border-top: 1px solid lighten( $black, 50%);

    p {
      font-size: ms(0);
      color: lighten( $black, 30% );
    }
  }
}
//
// :4.4 Homepage
// --------------------------------------------------
//
section#featured-news {
  // this is specific to the featured section of the home page
  h1 {
    @include capitalize;
    font-size: ms(2);
  }
  img { display: block; }
  p {
    font-size: ms(1);
    line-height: 1.125;
    font-weight: bold;
    margin-top: ms(-1);

    time, span {
      display: block;
      font-family: $otherfamily;
      font-style: italic;
      font-weight: normal;
      font-size: ms(0);
      color: $black;
    }
  }
}
//
// :4.5 Ministries and I'm New page
// --------------------------------------------------
//
div#ministries, div#im-new {
  section {
    padding-top: ms(5);
    padding-bottom: ms(3);
  }
}
//
// :4.6 Vision Statement
// --------------------------------------------------
//
blockquote.vision-statement {
  font-size: ms(6);
  line-height: 1;
  font-weight: bold;
  color: $green;
  border-left: ms(-2) solid $green;
}
//
// :4.7 Who is Jesus
// --------------------------------------------------
//
div#who-is-jesus {
  article#the-gospel {
    padding: ms(2) 0;

    h1 {
      color: $green;
      margin: ms(2) 0 ms(3);
    }

    p {
      font-size: ms(1);
    }
  }
}
//
// :4.8 Media
// --------------------------------------------------
//
ul.messages-module {
  list-style: inside none;

  p.title {
    font-size: ms(1);
    line-height: 1;
    font-weight: bold;
    margin-bottom: 0;
  }
  p.details {
    time {
      color: lighten($black, 30%);
      display: block;
      font-style: italic;
    }
  }
  ul.media {
    list-style: inside none;
    margin: 0;

    li {
      display: inline;

      a {
        padding: 1px 4px 2px;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        line-height: 1;
        white-space: nowrap;
        display: inline;
        position: relative;
        bottom: 1px;
        color: $white;
        background: $green;
        @include rounded();
      }
    }
  }
}
#media {
  article.series {
    h2 {
      margin-top: 0;
    }
  }
}
//
// :4.9 Giving
// --------------------------------------------------
//
#giving {
  #options {
    h2 {
      text-transform: uppercase;
      font-size: ms(2);
    }
    h2, p { text-align: center; }
    p {
      line-height: 1.375;
    }
  }
}
//
// :4.10 Staff Page
// --------------------------------------------------
//
#contact-us {
  #contacts {
    $image-width: 200px;
    .staff-chip {
      margin-bottom: ms(-1);
      min-height: 122px;

      p {
        padding-left: $image-width + 20px;
      }

      .fn {
        margin-bottom: 0;
        font-weight: bold;
        font-size: ms(1);
      }

      .title {
        margin-top: 0;
        margin-bottom: 8px;
        font-style: italic;
      }

      img.portrait {
        float: left;
        width: $image-width;
        margin-right: 1em;

        @include rounded();
        @include box-shadow();
      }
    }
  }
}
//
// :5 Class tags
// --------------------------------------------------
// These are general styles that can be used for more
// than one item. Generally, they are auto-generated content.
//
.bold { font-weight: bold; }
._bold { font-weight: normal; }
.divide-left { @include divide( 'left' ); }
.otherfamily { font-family: $otherfamily; }
.green { color: $green; }
.black { color: $black; }
.white { color: $white; }
.column, .columns {
  // This modified Foundation's default column padding
  padding: 0 $unit;
}
.legal {
  padding-top: $unit*3;

  p, div, span {
    font-size: ms(0);
    line-height: $ratio;
  }
}
img.alignright {
  float: right;
  margin: 0 0 $unit $unit;
}
img.alignleft {
  float: left;
  margin: 0 $unit $unit 0;
}
@include centered-text();

.sticky-container {
  position: relative;

  nav {
    width: inherit;
    background-color: $black;
    font-size: ms(1);

    ul {
      margin-bottom: 0;

      li {
        display: inline-block;
        list-style: none;
        margin-bottom: 0;

        a {
          display: block;
          position: relative;
          font-size: ms(1);
          line-height: $golden;
          padding: $unit $unit*1.5;
        }

        a:hover {
          background-color: lighten( $black, 10 );
        }

        a.active {
          color: $white;

          &::after {
            @include cssTriangle(7px,$black,top);
            position: absolute;
            bottom: ($unit * -1) + 2 ;
            left: 50%;
          }
        }
      }
    }
  }

  .sticky {
    position: fixed;
    top: 0;
    z-index: 10;
  }
}
// shrink the sticky nav font-size and padding so that it doesn't wrap on iPad
@media only screen and (max-width: 1023px) {
  .sticky-container nav ul li a {
    font-size: 12px;
    padding: 14px;
  }
}

.invert {
  // invert the background color and the type color
  background-color: $black;
  color: $white;
}

// block elements that act as advertisement spots for deeper pages
.spot {
  &.w500 {
    h1 {
      font-size: ms(2);
      margin: ms(-1) 0;
    }
  }
}

.shadow { @include box-shadow(); }

//
// :6 Overrides
// --------------------------------------------------
// Styles that override plugins or other widgets and such
//
ul.orbit-bullets li {
  background-image: url($templateImages + '/bullets.png');
}

// Search
// ==================================================
//
// - Search Form
// --------------------------------------------------
form#search {
  width: 90%;
  margin: 16px auto;
  text-align: center;

  input {
    line-height: 1.125;
    font-size: ms(0);
    padding: 8px 16px;
    outline: none;
    border: 1px solid rgb(120,120,120);
    background-color: fade_out( $white, 0.5);
    border-color: transparent;
    @include rounded(5px,5px);
    @include box-shadow( 0px, 1px, 3px, #000, 0.7, inset);
  }

  input[type='submit'] {
    display: none;
  }

  input.searchbox {
    padding-top: 12px;
    padding-left: $unit;
    border: 1px solid #999;
    @include rounded($unit, $unit, $unit, $unit);
    margin: 0 auto;
  }
}

// - Search results
// --------------------------------------------------
#searchresults {
  ol {
    li {
      p {
        margin: 0;
      }
      .title {
        font-size: ms(1);
      }
      .url {
        color: $green;
      }
      .excerpt {
      }
      .score {
        font-size: ms(-1);
        font-weight: 100;
      }
      ins {
      }
    }
  }
}


// Debugging
// --------------------------------------------------
#debugging {
  position: fixed;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  padding: 16px;
  
  h1 {
    font-size: 14px;
    color: rgb(255,255,255);
    text-shadow: none;
    background-color: rgb(0,0,0);
    display: inline;
    padding: 8px;
    margin: 0;
  }
  
  #debug-content {
    display: none;
    width: 90%;
    background: rgb( 0,0,0 );
    color: rgb(255,255,255);
    margin: 0;
    padding: 1em 1em 1em 2em;

    li {
      font-size: 10px;
    }
  }
}

